<template>
  <a-card
    class="general-card"
    :header-style="{ paddingBottom: '0' }"
    :body-style="{ padding: '0 0 20px 0' }"
  >
    <template #cover>
      <div
        :style="{
          height: '140px',
          overflow: 'hidden',
        }"
      >
        <a-avatar
          :size="75"
          :style="{ marginTop: '6%', marginLeft: '37%', cursor: 'pointer' }"
        >
          <img alt="avatar" :src="avatar" />
        </a-avatar>
        <a-typography-title
          :heading="5"
          style="margin: 10px 0 10px 0; text-align: center"
        >
          {{ userInfo.name }}
        </a-typography-title>
      </div>
    </template>
    <a-space size="large" style="margin-left: 15%">
      <a-statistic
        title="正在学习课程"
        :value="4"
        :value-style="{ textAlign: 'center' }"
        show-group-separator
      >
      </a-statistic>
      <a-statistic
        title="累计学习课程"
        :value="10"
        :value-style="{ textAlign: 'center' }"
      >
      </a-statistic>
    </a-space>
    <a-button class="card-btn" type="primary">查看我的全部课程</a-button>
  </a-card>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import { useUserStore } from '@/store';
  import avatar from '@/assets/images/avatar.png';
  
  const userStore = useUserStore();
  const userInfo = computed(() => {
    return {
      name: userStore.name,
    };
  });
  const links = [
    { text: 'workplace.contentManagement', icon: 'icon-file' },
    { text: 'workplace.contentStatistical', icon: 'icon-storage' },
    { text: 'workplace.advanced', icon: 'icon-settings' },
    { text: 'workplace.onlinePromotion', icon: 'icon-mobile' },
    { text: 'workplace.contentPutIn', icon: 'icon-fire' },
  ];
</script>

<style lang="less" scoped>
  .general-card {
    width: 100%;
  }
  .card-title {
    font-size: 16px;
    font-weight: 500;
    color: rgb(var(--gray-8));
    margin-bottom: 12px;
  }
  .arco-grid.panel {
    margin-bottom: 0;
    padding: 16px 20px 0 20px;
  }
  .panel-col {
    padding-left: 43px;
    border-right: 1px solid rgb(var(--gray-2));
  }
  .col-avatar {
    margin-right: 12px;
    background-color: var(--color-fill-2);
  }
  .up-icon {
    color: rgb(var(--red-6));
  }
  .unit {
    margin-left: 8px;
    color: rgb(var(--gray-8));
    font-size: 12px;
  }
  :deep(.panel-border) {
    margin: 4px 0 0 0;
  }

  .item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 40%;
    height: 22px;
    margin-bottom: 0;
    list-style: none;
    .item-content {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 0;
      padding-left: 0;
      color: #808080;
      text-decoration: none;
      font-size: 13px;
      cursor: pointer;
      font-size: 14px;
    }
  }

  .card-btn {
    padding: 10px 10px 10px 10px;
    margin-top: 10px;
    margin-left: 20%;
    margin-right: 30px;
    margin-bottom: 10px;
    width: 60%;
    background-color: #05c3fb;
  }
</style>
